<template>
	<view>
		<view class="top">
			<!-- #ifdef MP || APP-PLUS -->
			<view class="sys-head">
				<view class="sys-bar" :style="{height:sysHeight  + 'px'}"></view>
				<!-- #ifdef MP -->
				<view class="sys-title">
					<view v-if="isBack" @click="back" class="iconfont icon-fanhui1" hover-class="hoverClass"></view> 
					<view v-if="isHome" @click="back" class="iconfont icon-fanhui1" hover-class="hoverClass"></view> 
					{{ title }}
				</view>
				<!-- #endif -->
				<!-- <view class="bg" :style="{height:sysHeight}"></view> -->
			</view>
			<view class="" :style="{height:sysHeight  + 'px'}"></view>
			<view class="" style="height:43px"></view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	// #ifdef APP-PLUS || MP
	let sysHeight = uni.getSystemInfoSync().statusBarHeight;
	// #endif
	// #ifndef APP-PLUS || MP
	let sysHeight = 0;
	// #endif
	export default {
		name:"top-navbar",
		props: {
			title: {
				type: String,
				default: '弗洛花园鲜花'
			},
			isBack: {
				type: Boolean,
				default: true
			},
			isHome: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				sysHeight: sysHeight,
			};
		},
		methods: {
			back() {
				if(this.isHome) {
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else {
					uni.navigateBack({
						delta: 1
					})
				}
			},
		}
	}
</script>

<style lang="scss">
.sys-head {
	position: fixed;
	top: 0;
	// position: relative;
	width: 100%;
	background: url("~@/static/images/home_bg.png") no-repeat top;
	background-size: 100%;
	// background: linear-gradient(90deg, $bg-star1 0%, $bg-end1 100%);
	z-index: 999;
	.bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		
	}
	.icon-fanhui1 {
		display: inline-block;
		height: 100%;
		font-size: 32rpx;
		padding: 0 25rpx;
	}
	.sys-title {
		z-index: 10;
		position: relative;
		height: 43px;
		text-align: left;
		line-height: 43px;
		font-size: 36rpx;
		color: #FFFFFF;
	}
	.hoverClass {
		background-color: rgba(0,0,0, .3);
	}
}
</style>
